<template>
  <!-- 新增/修改地址 -->
  <el-dialog class="add-store-dialog" :title="title" :visible.sync="addVisible" width="30%">
    <div class="store-body">
      <el-form ref="storeFormRef" :rules="rules" :model="storeForm" label-width="140px">
        <el-form-item prop="recipient_name" label="收货人姓名">
          <el-input v-model="storeForm.recipient_name"></el-input>
        </el-form-item>
        <el-form-item prop="recipient_phone" label="手机号">
          <el-input v-model="storeForm.recipient_phone"></el-input>
        </el-form-item>
        <el-form-item prop="address" label="收货地址">
          <el-input v-model="storeForm.address"></el-input>
        </el-form-item>
        <el-form-item prop="is_default" label="是否为默认地址">
          <el-radio-group v-model="storeForm.is_default">
            <el-radio :label="0">否</el-radio>
    <el-radio :label="1">是</el-radio>
 

  </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { updateAddress, addAddress } from "@/api/user";
export default {
  name: "AddDialog",
  components: {},
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
    storeData: {
      type: Object,
      default: {},
    },
    title: {
      type: String,
      default: "新增地址",
    },
  },
  data() {
      //验证手机号
      const validatePhone = (rule, value, callback) => {
      const regexp = /^1[3-9]\d{9}$/;
      return regexp.test(value)
        ? callback()
        : callback(new Error("请输入正确的手机号"));
    };
    return {
      dialogVisible: false,
      disabled: false,
      //表单
      storeForm: {
        address_id: null,
        user_id: null,
        recipient_name: null,
        recipient_phone: null,
        address: null,
        is_default: 0,
      
      },
      rules: {
        recipient_name: [
          { required: true, trigger: "blur", message: "请输入收货人姓名" },
        ],
        recipient_phone: [
          { required: true, trigger: "blur", validator: validatePhone},
        ],
        address: [
          { required: true, trigger: "blur", message: "请输入收货地址" },
        ],
      },
    };
  },
  watch: {},
  created() {},
  mounted() {
    if (this.title !== "新增地址") {
      this.handleEditInfo();
    }
  },
  computed: {
    ...mapGetters(["name", "token"]),
    addVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    cancel() {
      this.$refs.storeFormRef.resetFields();
      this.addVisible = false;
    },
    handleEditInfo() {
      this.storeForm = this.storeData;
    },
    confirm() {
      this.$refs.storeFormRef.validate(async (valid) => {
        if (valid) {
          if (this.title === "新增地址") {
            if(!this.token) return this.$message.warning("请先登录！");
            const data = {
              user_id: +this.token,
              recipient_name: this.storeForm.recipient_name,
              recipient_phone: this.storeForm.recipient_phone,
              address: this.storeForm.address,
              is_default: this.storeForm.is_default,
            };
            const res = await addAddress(data);
            if (res?.status === 0) {
              this.$message.success("新增地址成功");
              this.$emit("confirm");
              this.addVisible = false;
            } else {
              this.$message.error("新增地址失败");
            }
          } else {
            //编辑
            if (!this.storeForm?.address_id)
              return this.$message.warning("无id，请选择要编辑的信息!");
            const data = {
              ...this.storeForm,
            };
            const res = await updateAddress(data);
            if (res?.status === 0) {
              this.$message.success(res.message);
              this.$emit("confirm");
              this.addVisible = false;
            } else {
              this.$message.error(res.message);
            }
          }
        } else {
          console.log("错误提交！请重试！");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 220px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.flex-per50 {
  width: 50%;
}
</style>
